<template>
  <div class="page-content">
    <button @click="goBack" v-show="isshow">返回上一页</button>
    <span id="mu" :style="{color:titlecolor}">{{mu}}万亩</span>
    <div class="comm-content" ref="box"></div>
  </div>
</template>

<script>
import getMapName from '../../public/getMapName.js'
export default {
  data() {
    return {
      titlecolor:"#999",
      myEcharts: null,
      isshow:false,
      mu:0,
    }
  },
  destroyed() {
    window.removeEventListener('reset', this.screen)
  },
  computed: {
        themeStatus() {
            return this.$store.state.theme
        }
    },
    watch: {
        themeStatus() {
            console.log(this.$store.state.theme);
            this.myEcharts.dispose()
            this.initEcharts()
            this.screen()
        }
    },
  mounted() {
    
  
    this.initEcharts()
    window.addEventListener("resize", this.screen)
    this.screen()

  },

  methods: {
    goBack(){
     this.myEcharts.dispose()
     this.initEcharts()
     this.isshow=false
    },
    //适配屏幕
    screen() {
      this.myEcharts.resize()
      //计算一个文字大小比例
      let width = this.$refs.box.offsetWidth
      let num = width / 100 * 2
      let options = {
        title: {
          textStyle: {
            //设置主题样式
            fontSize: num
          }
        }
      }
      //修改之后要重绘
      this.myEcharts.setOption(options)
    },
    // 初始化图表
    async initEcharts() {
      let box = this.$refs.box
      this.myEcharts = this.$echarts.init(box,this.themeStatus)
      //绘制地图经纬度
      let mapData = await this.$http("http://localhost:8080/map/china.json")
      let dataList = await this.$http("/CropCoverage")
      console.log(dataList);
      this.mu = dataList.data.MainPlants
      console.log(mapData);
      this.$echarts.registerMap("china", mapData.data)
      let options = {
        title: {
          text: "各地区农作物覆盖面积",
          left: 10,
          top: 10,
         

        },
        tooltip: {
          show: true
        },
        visualMap: {
          show: true,
          //是否显示手柄
          calculable: true,
          max: 400,
          min: 100,
          color: ['#0F3357', '#36BFE5']
        },
        series: [
          {
            type: "map",
            map: "china",
            zoom: 1.2,//地图显示比例
            data:dataList.data.content,
            roam: true,
            label: {
              show: true
            },
            // emphasis: {
            //   focus: "#5193C6", //突出选中的区域 其它区域谈化效果
            //   itemStyle: {
            //     opacity: 1,
            //     borderColor: "#2F6A97",
            //     borderWidth: "3",
            //     areaColor: "#2F6A97"
            //   }
            // },

          }
        ]

      }
      this.myEcharts.setOption(options)
      this.myEcharts.on("click",async(city)=>{
        let cityName = getMapName(city.name)//获取到中文省份名
        if(!cityName.name){return}
        let cityList = await this.$http("http://localhost:8080"+cityName.path)
        this.$echarts.registerMap(cityName.name,cityList.data)
        let options = {
          series:[
            {
              type:"map",
              map:cityName.name
            }
          ]
        }
        this.myEcharts.setOption(options)
        this.isshow = true
      })
    },
    // setEcharts(dataList) {
    //   let options = {
    //     series: [
    //       {
    //         data: dataList.data.content
    //       }
    //     ]
    //   }
    //   this.myEcharts.setOption(options)
      
    
    // }
  }
 
}
</script>

<style scope>
.page-content{
  position: relative;
}
button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99999;
}
#mu{
  position: absolute;
  top: 60px;
  left: 20px;
  z-index: 99999;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
}
</style>